$('.thief > span').click(function () {
  $('.thief > span').removeClass('active').parent().find(`span:eq(${$(this).index()})`).addClass('active')
  $('.welcome > form').removeClass('active').parent().find(`form:eq(${$(this).index()})`).addClass('active')
})
$('.join > button').click(function () {
  window.location.href = './registered.html'
})

first_form()
function first_form() {
  const first_form = document.querySelector('.first_form')
  let phone = document.querySelector('.first_form .phone')
  const image_verification_code = document.querySelector('.first_form .image_verification_code')
  const refresh_verification_code = document.querySelector('.first_form .refresh_verification_code')
  const sms_verification_code = document.querySelector('.first_form .sms_verification_code')
  const obtaining_verification_code = document.querySelector('.first_form .obtaining_verification_code')
  const dis_box = document.querySelector('.first_form .dis_box')
  let error_con = document.querySelector('.first_form .error_con')
  const login_immediately = document.querySelector('.first_form .login_immediately')
  const forget = document.querySelector('.first_form .forget')
  first_form.addEventListener('submit', function (e) {
    e = e || window.event
    try { e.preventDefault() } catch (err) { e.returnValue === false }
    const image_verification_codeInp = image_verification_code.value
    const sms_verification_codeInp = sms_verification_code.value
    const phoneInp = phone.value
    if (phoneInp === '') {
      error_con.innerText = '手机号输入不能为空'
      dis_box.style.display = 'block'
      return
    }
    if (image_verification_codeInp === '') {
      error_con.innerText = '图片验证码输入不能为空'
      dis_box.style.display = 'block'
      return
    }
    if (sms_verification_codeInp === '') {
      error_con.innerText = '短信验证码输入不能为空'
      dis_box.style.display = 'block'
      return
    }
  })

  phone.addEventListener('input', (e) => {
    e = e || window.event
    const phoneInp = phone.value
    if (phoneInp === '') {
      error_con.innerText = '手机号输入不能为空'
      dis_box.style.display = 'block'
    } else if (/^1[3456789]\d{9}$/.test(phoneInp) === false) {
      error_con.innerText = '您的手机号输入有误'
      dis_box.style.display = 'block'
    } else {
      dis_box.style.display = 'none'
    }
  })
  refresh_verification_code.addEventListener('click', () => {
    window.location.reload()
  })
}

second_form()
function second_form() {
  const second_form = document.querySelector('.second_form')
  const phone = document.querySelector('.second_form .phone')
  const password = document.querySelector('.second_form .login_password')
  const dis_box = document.querySelector('.second_form .dis_box')
  let error_con = document.querySelector('.second_form .error_con')
  const login_immediately = document.querySelector('.second_form .login_immediately')
  const forget = document.querySelector('.second_form .forget')
  let users = JSON.parse(window.localStorage.getItem('users')) || []
  console.log(users)
  
  phone.addEventListener('input', (e) => {
    e = e || window.event
    const phoneInp = phone.value
    if (phoneInp === '') {
      error_con.innerText = '手机号或密码输入不能为空'
      dis_box.style.display = 'block'
    } else if (/^1[3456789]\d{9}$/.test(phoneInp) === false) {
      error_con.innerText = '您的手机号输入有误'
      dis_box.style.display = 'block'
    } else {
      dis_box.style.display = 'none'
    }
  })

  password.addEventListener('input', (e) => {
    e = e || window.event
    const passwordInp = password.value
    if (passwordInp === '') {
      error_con.innerText = '手机号或密码输入不能为空'
      dis_box.style.display = 'block'
      return
    }
    
  })

  second_form.addEventListener('submit', function (e) {
    e = e || window.event
    try { e.preventDefault() } catch (err) { e.returnValue === false }
    const phoneInp = phone.value
    const passwordInp = password.value
    // const user1 = users.find(item => item.phone === phoneInp)
    // if (!user1) {
    //   error_con.innerText = '您还没有注册账号'
    //   dis_box.style.display = 'block'
    //   return
    // }
    const user = users.find(item => item.phone === phoneInp && item.password === passwordInp)
    if (!user) {
      error_con.innerText = '账户名或密码错误'
      dis_box.style.display = 'block'
      return
    }
    window.localStorage.setItem('phone', user.phone)
    window.localStorage.setItem('id', user.id)
    console.log(user.id)
    window.alert('恭喜你,登陆成功')
    window.location.href = './homePage.html'
  })
}
